<template>
  <div class="calendar">
    <div class="calendar-header">{{ monthName }} {{ year }}</div>
    <div class="calendar-body">
      <div class="calendar-row">
        <div class="calendar-day">一</div>
        <div class="calendar-day">二</div>
        <div class="calendar-day">三</div>
        <div class="calendar-day">四</div>
        <div class="calendar-day">五</div>
        <div class="calendar-day">六</div>
        <div class="calendar-day">日</div>
      </div>
      <div class="calendar-row" v-for="week in weeks" :key="week[0].toString()">
        <div class="calendar-day" v-for="day in week" :key="day.toString()">
          <div class="calendar-date p-1 text-center"
               :class="{ 'today': isToday(day), 'selected': isSelected(day),'signed': isSignedIn(day) }"
               @click="selectDate(day)">
            {{ day.getDate() }}
          </div>
        </div>
      </div>
    </div>
    <div class="calendar-footer">
      <n-button @click="signIn(new Date())" :disabled="isSignedIn(new Date())" block type="success"
                class="bg-green-500">{{ isSignedIn(new Date()) ? '已签到' : '签到' }}
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, onMounted} from 'vue';
import api from "@/api";
import { useUserStore} from "@/store/module/user";

const userStore = useUserStore()
const signedInDays = ref([])
onMounted(() => {
  if (userStore.token) {
    getSignedInDay()
  } else {
    //@ts-ignore
    signedInDays.value = ['']
  }
})

const getSignedInDay = () => {
  api.user.getSignedInDay({}).then((res: any) => {
    signedInDays.value = res.data.data.split(",")
  })
}


function isSignedIn(date: Date) {
  //@ts-ignore
  return userStore.userInfo.username !== '' && signedInDays.value?.includes(date.toLocaleDateString());
}


function addSignedInDay(date: Date) {
  //@ts-ignore
  signedInDays.value?.push(date.toLocaleDateString());
}

const signIn = (date: Date) => {
  if (userStore.userInfo.username) {
    if (isSignedIn(date)) {
      window.$message.success('今天已经签到过了！')
    } else {
      addSignedInDay(date);
      api.user.signeIn().then((res: any) => {
        console.log(res)
      })
      window.$message.success('签到成功！')
    }
  } else {
    window.$message.warning('请先登录！')
  }

}

function selectDate(date: any) {
  selectedDate.value = date;
}


// Define data
const currentDate = ref(new Date());
const selectedDate = ref(null);

// Define computed properties
const month = computed(() => currentDate.value.getMonth());
const year = computed(() => currentDate.value.getFullYear());
const monthName = computed(() => currentDate.value.toLocaleString('default', {month: 'long'}));
const weeks = computed(() => getWeeks());

// Define methods
function getWeeks() {
  const weeks: Date[][] = [];
  const date = new Date(year.value, month.value, 1);

  while (date.getMonth() === month.value) {
    const week: Date[] = [];
    for (let i = 0; i < 7; i++) {
      week.push(new Date(date));
      date.setDate(date.getDate() + 1);
    }
    weeks.push(week);
  }

  return weeks;
}

function isToday(date: Date) {
  const today = new Date();
  return today.getFullYear() === date.getFullYear() &&
      today.getMonth() === date.getMonth() &&
      today.getDate() === date.getDate();
}

function isSelected(date: Date): boolean {
  if (selectedDate.value === null) {
    return false;
  }
  //@ts-ignore
  return selectedDate.value.getFullYear() === date.getFullYear() &&
      //@ts-ignore
      selectedDate.value.getMonth() === date.getMonth() &&
      //@ts-ignore
      selectedDate.value.getDate() === date.getDate();
}


</script>

<style scoped>
.calendar {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 1rem;
  width: 100%;
}

.dark .calendar {
  border: 1px solid #424346;
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 1rem;
  width: 100%;
}

.calendar-header {
  background-color: #f7fafc;
  color: #4a5568;
  font-weight: bold;
  padding: 0.5rem;
  text-align: center;
}

.dark .calendar-header {
  background-color: #101014;
  color: #4a5568;
  font-weight: bold;
  padding: 0.5rem;
  text-align: center;
}

.calendar-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.5rem;
}

.calendar-row {
  display: flex;
  width: 100%;
}

.calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 7);
}

.calendar-date {
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
}

.calendar-date:hover {
  opacity: 70%;
}

.calendar-date.selected {
  background-color: #4299e1;
  color: white;
}

.calendar-date.selected:hover {
  background-color: #2b6cb0;
}

.calendar-date.today {
  border: 1px solid #cbd5e0;
  background-color: #f7fafc;
  color: #4a5568;
}

.calendar-date.signed {
  background-color: #9acd32;
}
</style>